<script setup lang="ts">
import { patrolingCruise } from '@/api/control'
import { handleEndRainAvoidance } from '@/shared/map/home'
import { useCarStore } from '@/stores/car'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const carStore = useCarStore()
</script>

<template>
  <el-card
    class="flex-grow my-1 relative"
    shadow="always"
    header="雨量"
    style="--el-card-padding: 0"
  >
    <div class="flex flex-col items-center">
      <span
        class="m-2 inline-block whitespace-nowrap overflow-hidden text-ellipsis select-none align-middle text-sm"
        >雨量计:{{ carStore.carRainfallNum ? carStore.carRainfallNum : 0 }}mm</span
      >
      <div class="flex p-2">
        <el-button
          size="small"
          class="mr-2"
          @click="
            async () => {
              const data = {
                code: carStore.currentCar,
                param1: 10,
                param2: 1,
                param3: 255,
                param4: 255
              }
              await patrolingCruise(data)
            }
          "
          >{{ t('yu-liang-qing-chu') }}
        </el-button>
        <el-button
          size="small"
          @click="
            () => {
              handleEndRainAvoidance()
            }
          "
          >{{ t('jie-shu-bi-yu') }}
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
